<template>
  <div class="commodity-box">
    <!-- 测量列表 -->
    <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch"/>
    <div class="function-box">
      <el-button v-show="checkPermi(['system:measurement:edit'])" class="createBtn" @click="addGoodsInfo"><i
          class="iconfont icon-plus-square"/>新增
      </el-button>
    </div>
    <forTableCom :bg="bg" :color="color" :idActive="idActive" :limit="pageSize" :page="pageNum"
                 :tableData="inventoryTableData"
                 :tableHeaderData="inventoryTableHeaderData" :total="totals" @handleChange="handleChange"
                 @handleSelectionChange="handleSelectionChange" @updateLimit="updateLimit" @updatePage="updatePage">

      <el-table-column :align="'center'" show-overflow-tooltip :fixed="'right'" :width="150" class-name="operate" label="操作">
        <template #default="scope">
          <el-button v-show="scope.row.designType == '审核通过'" @click="goAccounting(scope.row)">核算</el-button>
          <el-button @click="updatedGoodsInfo(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </forTableCom>
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import {listMeasurement} from '@/api/costSum';
import {defineEmits, onMounted, ref} from 'vue';
import {updatePopHook} from '@/hook/setPop/updatePop.js'
import {deletePopHook} from '@/hook/setPop/deletePop.js'
import {checkPermi} from "@/utils/permission.js";

const emit = defineEmits(['goMeasurement', 'goAccounting'])
let updatePop = updatePopHook()
let deletePop = deletePopHook()
// 弹窗
let flag = ref(false)

// 勾选激活行的背景色
const idActive = 'id'


// 表单
let inventoryForm = ref(
    {
      id: '',      // 测量单编号
      productName: '',    // 测量日期
      terminalName: '',      // 终端名称
      customerId: '',       // 客户名称
    }
)
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'surveyDate',
    label: '测量日期',
    type: 'picker'
  },
  {
    name: 'terminalName',
    label: '终端名称'
  },
  {
    name: 'customerId',
    label: '客户名称',
    type: 'customer'
  },
  {
    name: 'designType',
    label: '设计状态',
    type: 'select',
    client: [
      {
        label: '待设计',
        value: '待设计'
      },{
        label: '驳回',
        value: '驳回'
      },{
        label: '已核算',
        value: '已核算'
      },{
        label: '待审核',
        value: '待审核'
      },{
        label: '审核通过',
        value: '审核通过'
      },
    ]
  },
])
// 查找suppliersName
const onSearch = (v) => {
  pageNum.value = 1
  querySelectProduct(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])


// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'id',
    label: '测量单编号',
    minwidth: '100px'
  },
  {
    prop: 'orderId',
    label: '单据编号',
    minwidth: '200px'
  },
  {
    prop: 'mtype',
    label: '类型',
    minwidth: '100px'
  },
  {
    prop: 'terminalName',
    label: '终端名称',
    colorClassName: 'activeColor',
    minwidth: 300,
  },
  {
    prop: 'customerName',
    label: '客户名称',
    minwidth: '100px'
  },
  {
    prop: 'manufacturerContact',
    label: '厂家负责人',
    minwidth: '100px'
  },
  {
    prop: 'businessSurveyorName',
    label: '经营测量人员',
    minwidth: '150px'
  },
  {
    prop: 'designerName',
    label: '设计人员',
    minwidth: '150px'
  },
  {
    prop: 'surveyDate',
    label: '测量日期',
    minwidth: '100px'
  },
  {
    prop: 'type',
    label: '模板名称',
    minwidth: '150px'
  },
  {
    prop: 'designType',
    label: '状态',
    minwidth: '100px'
  },
])
// 表格数据内容
let inventoryTableData = ref([])
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let {page, limit} = v.page
  pageNum.value = page
  pageSize.value = limit

  let params = inventoryForm.value
  querySelectProduct(params)
}


// 去测量
const addGoodsInfo = () => {
  flag.value = true
  emit('goMeasurement')
}

// 详情修改
const updatedGoodsInfo = (v) => {
  flag.value = true
  emit('updatedGoodsInfo', v)
}

// 查询商品管理接口
const querySelectProduct = async (data = {}) => {
  let page = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,

  }
  let params = Object.assign(data, page)
  let res = await listMeasurement(params)
  let {code, rows, total} = res
  try {
    if (code == 200) {
      inventoryTableData.value = rows
      totals.value = total
    }
  } catch {

  }
}

// 请求出库单接口函数
const getoutboundOrderData = () => {
  querySelectProduct()
}

// 去核算
const goAccounting = (v) => {
  emit('goAccounting', v)
}
onMounted(() => {
  querySelectProduct()
})
</script>
<style lang='scss' scoped>
.commodity-box {
  padding: 16px;
}
</style>
